<!-- 银行卡 -->
<template>
	<view>
		<block v-for="item in 3">
			<view class="card" style="background: url('/static/image/img_yinhangka_bg_jiansheyinhang.png') no-repeat;">
				<view class="title">
					<image src="/static/image/icon_yinhangka_jiansheyinhang.png" mode=""></image>
					建设银行
				</view>
				<view class="number">
					<view class='v'>****</view>
					<view class='v'>****</view>
					<view class='v'>****</view>
					<view class='v' style="margin-top: -10rpx;">8329</view>
				</view>
			</view>
		</block>
		<view class="add">
			<view class="addcard">
				+添加银行卡
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.card {
		margin: 20rpx auto;
		width: 670rpx;
		height: 250rpx;
		overflow: hidden;
		position: relative;

		.title {
			margin: 34rpx 0 0 110rpx;
			font-family: PingFang SC;
			font-size: 32rpx;
			line-height: 44rpx;
			letter-spacing: 0rpx;
			color: #ffffff;

			image {
				position: absolute;
				width: 64rpx;
				height: 64rpx;
				top: 24rpx;
				left: 24rpx;
			}
		}
	}

	.number {
		margin: 30rpx auto;
		width: 448rpx;
		height: 60rpx;
		display: flex;
		justify-content: space-between;

		.v {
			font-family: DIN;
			font-size: 48rpx;
			font-weight: normal;
			letter-spacing: 0rpx;
			color: #ffffff;

		}
	}

	.add {
		margin: 0 auto;
		width: 630rpx;
		height: 106rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(225, 225, 225, 0.2);
		border-radius: 12rpx;
		text-align: center;
		.addcard {
			line-height: 106rpx;
			width: 630rpx;
			height: 106rpx;
			background-color: #ffffff;
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(225, 225, 225, 0.2);
			border-radius: 12rpx;
			font-family: PingFang SC;
			font-size: 32rpx;
			letter-spacing: 0rpx;
			color: #7e7e7e;
		}
	}
</style>
